<template>
  <view>
    <uni-swipe-action>
      <view v-for="(item,index) in goodList" :key="index">
        <uni-swipe-action-item :disabled="showSwiperAction" :right-options="options" @click="onClick(item.goods_id)">
          <view class="good-item">
            <view class="good-img">
              <radio v-show="showRadio" @click="radioChangeHandler(item.goods_id,item.goods_state)"
                :checked="item.goods_state" color="#c00000">
              </radio>
              <image @click="goDetail(item.goods_id)" mode="widthFix"
                :src="item.goods_small_logo ?item.goods_small_logo:defaultImg"></image>
            </view>
            <view class="good-text">
              <view class="title">
                {{item.goods_name}}
              </view>
              <view class="number">
                <uni-number-box :value="item.goods_count" @change="(value)=>bindChange(value,item.goods_id)" :min="1"
                  :max="9" v-show="showNumberBox"></uni-number-box>
              </view>
              <view class="price">
                ￥{{item.goods_price | toFixed}}
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </view>
    </uni-swipe-action>
  </view>
</template>

<script>
  export default {
    props: {
      goodList: {
        type: Array,
        default: []
      },
      showRadio: {
        type: Boolean,
        default: false
      },
      showSwiperAction: {
        type: Boolean,
        default: true
      },
      showNumberBox: {
        type: Boolean,
        default: false
      }
    },
    name: "my-goods",
    data() {
      return {
        defaultImg: 'https://dummyimage.com/300.png/09f/fff',
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }]
      };
    },
    methods: {
      goDetail(id) {
        uni.navigateTo({
          url: "/subpkg/goods_detail/goods_detail?goods_id=" + id
        })
      },
      radioChangeHandler(id, state) {
        this.$emit('radio-change', {
          id,
          state
        })
        this.$store.commit('setCheckCount')
      },
      bindChange(number, id) {
        this.$emit('number-change', {
          number,
          id
        })
      },
      clickHandler() {
        console.log(123)
      },
      onClick(id) {
        this.$emit('delete-change', id)
        this.$store.commit('setCheckCount')
      }
    },
    filters: {
      toFixed(num) {
        return Number(num).toFixed(2)
      }
    }
  }
</script>

<style lang="scss">
  .good-item {
    display: flex;
    padding: 10rpx;
    background-color: white;
    border-bottom: #eee solid 1px;

    .good-img {
      flex: 1;
      display: flex;
      align-items: center;

      image {
        width: 220rpx;
      }
    }

    .good-text {
      flex: 2;
      position: relative;
      margin-left: 10rpx;

      .title {
        margin-top: 10rpx;
        font-size: 12px;
      }

      .number {
        position: absolute;
        right: 30rpx;
        top: 150rpx;
      }

      .price {
        color: darkred;
        font-size: 16px;
        font-weight: 900;
        position: absolute;
        bottom: 20rpx;
      }
    }
  }
</style>